<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>战队列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../admin/css/other/eventCenter.css" />
</head>

<body>
    <div class="page-container">
        <form class="layui-form" action="">
            <div class="search-form">
                <div class="layui-row">
                    <div class="layui-col-xs3">
                        <div class="layui-form-item">
                            <label class="layui-form-label">战队名</label>
                            <div class="layui-input-block">
                                <input type="text" name="keyward" id="keyward" class="layui-input layui-input-white" lay-verify="required" placeholder="请输入关键词"
                                    autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs2 search-btn">
                        <button type="button" class="layui-btn layui-btn-container" id="btnQuery">搜索</button>
                        <button type="button" class="layui-btn layui-btn-primary" id="btnReset">重置</button>
                    </div>
                </div>
            </div>
        </form>
        <div class="layui-card">
            <div class="layui-card-body">
                <table class="layui-hide" id="teamTable" lay-filter="teamTable"></table>
            </div>
        </div>
    </div>
    <div id="teamFormLayer" class="team-form-layer open-form-layer" style="display: none;">
        <form class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label label-110"><span class="required-span">*</span>战队名</label>
                <div class="layui-input-block">
                    <input type="text" name="keyward" id="keyward" class="layui-input layui-input-white" lay-verify="required" placeholder="请输入战队名"
                        autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item ">
                <label class="layui-form-label">战队头像</label>
                <div class="layui-input-block">
                    <button type="button" class="layui-btn layui-btn-normal" id="tx-upload">
                        <i class="layui-icon layui-icon-upload"></i>
                        上传图片
                    </button>
                    <button type="button" class="layui-btn layui-btn-primary" id="logo-upload-img" style="color:#fff !important">
                        <i class="layui-icon layui-icon-picture"></i>
                        图库选择
                    </button>
                    <span><span class="required-span">*</span>请上传图片格式文件，大小不超过5M</span>
                    <div class="layui-upload-list" id="demo-upload-img"></div>
                </div>
            </div>
            <div class="layui-form-item ">
                <label class="layui-form-label label-110">战队介绍</label>
                <div class="layui-input-block">
                    <textarea class="layui-textarea" placeholder="请输入战队介绍"></textarea>
                </div>
            </div>
            <div class="layui-form-item ">
                <label class="layui-form-label label-110"><span class="required-span">*</span>所属组织</label>
                <div class="layui-input-block">
                    <input type="text" name="keyward" id="keyward" class="layui-input layui-input-white" lay-verify="required" placeholder="请输入所属组织"
                        autocomplete="off" class="layui-input">
                </div>
            </div>
        </form>
    </div>
    <script type="text/html" id="temOperation">
        <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
        <a class="layui-btn layui-btn-xs" lay-event="linkMember"><i class="layui-icon layui-icon-group"></i>队员管理</a>
        
        <!-- pearAdmin.instances.tabPage.changePage({
            id: $(this).attr("user-menu-id"),
            title: $(this).attr("user-menu-title"),
            url: $(this).attr("user-menu-url"),
            close: true
        },
        <a class="layui-btn layui-btn-xs" user-menu-url="view/account/team/member.html" user-menu-id="5555" user-menu-title="队员管理"><i class="layui-icon layui-icon-group"></i>队员管理</a> -->
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
    </script>
    <script type="text/html" id="modeSwitch">
        <input type="checkbox" name="{{d.mode}}" value="{{d.mode}}" title="内部赛" lay-skin="switch"
            lay-filter="modeSwitch" {{d.mode == 1 ? "checked" : ""}} >
    </script>
    <script type="text/html" id="teamToolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn" lay-event="getData"><i class="layui-icon layui-icon-add-1"></i>创建战队</button>
            <button type="button" lay-event="deleteRows" class="layui-btn layui-btn-danger" id="btnReset" style="color: #fff;">
                <i class="layui-icon layui-icon-delete" style="color: #fff;"></i>删除选中
            </button>
            <button class="layui-btn layui-btn-warm" lay-event="getData"><i class="layui-icon layui-icon-ok"></i>批量禁用/恢复</button>
            <button class="layui-btn layui-btn-warm" lay-event="getData"><i class="layui-icon layui-icon-ok"></i>批量审核/取消加入</button>
            <button class="layui-btn" lay-event="getData"><i class="layui-icon layui-icon-upload-drag"></i>批量导入战队及用户</button>
            <button class="layui-btn layui-btn-warm" lay-event="getData"><i class="layui-icon layui-icon-download-circle"></i>导入模板下载</button>
            <button class="layui-btn layui-btn-normal" lay-event="linkNewTeam"><i class="layui-icon layui-icon-link"></i>新战队审核</button>
        </div>
    </script>
    <script type="text/html" id="statusSwitch">
        <input type="checkbox" name="{{d.status}}" value="{{d.status}}" title="正常" lay-skin="switch"
            lay-filter="statusSwitch" {{d.status == 1 ? "checked" : ""}} >
    </script>
    <script type="text/html" id="userChangeSwitch">
        <input type="checkbox" name="{{d.userChange}}" value="{{d.userChange}}" title="审核" lay-skin="switch"
            lay-filter="userChangeSwitch" {{d.userChange == 1 ? "checked" : ""}} >
    </script>
    <script>
        layui.use(['table', 'dropdown', 'form', 'jquery', 'layer', 'laydate'], function () {
            var table = layui.table;
            var dropdown = layui.dropdown;
            var form = layui.form;
            var $ = layui.jquery;
            var laydate = layui.laydate;

            form.render('select');
            form.render('radio');
            var start = "#startTime", end = "#endDate";//开始时间选择框、结束时间选择框：文本框
            var startTime = laydate.render({
                elem: '#startTime',
                max: '2099-12-31 23:59:59',
                done: function (value, date) {
                    endTime.config.min = {
                        year: date.year,
                        month: date.month - 1, //关键：由于月份是从0开始的，所以实际选择时要减1
                        date: date.date,
                        hours: date.hours,
                        minutes: date.minutes,
                        seconds: date.seconds
                    };
                }
            })
            // 结束时间
            var endTime = laydate.render({
                elem: '#endTime',
                max: '2099-12-31 23:59:59',
                done: function(value, date){
                    startTime.config.max = {
                        year: date.year,
                        month: date.month - 1, //关键：由于月份是从0开始的，所以实际选择时要减1
                        date: date.date,
                        hours: date.hours,
                        minutes: date.minutes,
                        seconds: date.seconds
                    };
                }
            });
            // 创建渲染实例
            table.render({
                elem: '#teamTable',
                url: '../../admin/data/team.json', // 此处为静态模拟数据，实际使用时需换成真实接口
                toolbar: '#teamToolbarDemo',
                defaultToolbar: ['filter', 'exports', 'print'],
                height: 'full-35', // 最大高度减去其他容器已占有的高度差
                css: [ // 重设当前表格样式
                    '.layui-table-tool-temp{padding-right: 145px;}'
                ].join(''),
                cellMinWidth: 80,
                totalRow: true, // 开启合计行
                page: true,
                cols: [[
                    { type: 'checkbox', fixed: 'left' },
                    { field: 'id', title: '#' },
                    { field: 'name', title: '战队名'},
                    { field: 'desc', title: '简介', templet: function (d) {
                            if (d.desc == '') return "暂无"
                    }},
                    { field: 'team', title: '所属组织'},
                    { field: 'teamNums', title: '成员数'},
                    { field: 'creater', title: '创建人'},
                    { field: 'status', title: '状态', templet: '#statusSwitch' },
                    { field: 'userChange', title: '人员变动', templet: '#userChangeSwitch' },
                    { field: 'creatTime', title: '创建时间', width: 160 },
                    { field: '操作', title: '操作', width: 300, toolbar: '#temOperation' },
                ]]
            });

            function openteamLayer () {
                layer.open({
                    type: 1,
                    zIndex: 19891015,
                    skin: 'previewImg',
                    title: '<div class="height: 10px; width: 1px; border: 1px solid red;"></div>创建题目',
                    content: $("#teamFormLayer"), // 获取ID为formLayer的DOM元素
                    area: ['780px', '485px'],
                    btn: ['提交', '取消'],
                    shade: 0.5, // 遮罩层透明度，0为不显示
                    shadeClose: true,
                    success: function(layero, index){
                        var shade = $('.layui-layer-shade');
                        console.log(layer.zIndex);
                        shade.css('z-index', 899);
                    },
                    yes: function(index, layero){
                        // 表单提交事件
                        // 触发提交事件
                        form.on('submit(formSubmit)', function(data){
                        // 发送Ajax请求提交表单
                        // $.post('path/to/your/server/endpoint', data.field, function(response){
                        //     layer.msg('表单提交成功!', {time: 1000});
                        //     // 关闭弹框
                        //     layer.close(index);
                        // });
                        return false; // 阻止表单默认提交
                        });
                    }
                });
            }

            // 工具栏事件
            table.on('toolbar(teamTable)', function (obj) {
                var id = obj.config.id;
                var checkStatus = table.checkStatus(id);
                var othis = lay(this);
                switch (obj.event) {
                    case 'getCheckData':
                        var data = checkStatus.data;
                        layer.alert(layui.util.escape(JSON.stringify(data)));
                        break;
                    case 'getData':
                        openteamLayer();
                        break;
                    case 'deleteRows':
                        layer.confirm('确定要删除选中的理论题目?', function (index) {
                            layer.close(index);
                            // 向服务端发送删除指令
                        });
                        break;
                    case 'linkNewTeam':
                        PearAdmin.instances.tabPage.changePage({
                            id: 'account-team-newteam',
                            title: '新战队审核',
                            url: 'view/account/team/newTeam.html',
                            close: true
                        });
                        break;
                    case 'LAYTABLE_TIPS':
                        layer.alert('自定义工具栏图标按钮');
                        break;
                };
            });

            // 触发单元格工具事件
            table.on('tool(teamTable)', function (obj) { // 双击 toolDouble
                var data = obj.data; // 获得当前行数据
                if (obj.event === 'edit') {
                    openteamLayer();
                } else if (obj.event === 'del') {
                    layer.confirm('确定要删除该理论题目?', function (index) {
                        obj.del(); // 删除对应行（tr）的DOM结构
                        layer.close(index);
                        // 向服务端发送删除指令
                    });
                } else if (obj.event === 'linkMember') {
                    PearAdmin.instances.tabPage.changePage({
                        id: 'account-team-member',
                        title: '队员管理',
                        url: 'view/account/team/member.html',
                        close: true
                    });
                }
            });

            // 触发表格复选框选择
            table.on('checkbox(teamTable)', function (obj) {
                console.log(obj)
            });

            var upload = layui.upload;
            
            //图片上传
            upload.render({
                elem: '#tx-upload' //绑定元素
                ,url: '/upload/' //改为你的图片上传接口
                ,size: 5120 //设置文件最大可上传大小，单位KB
                ,exts: 'zip|rar' //设置可上传文件的扩展名
                ,before: function(obj){
                    // 获取文件后缀
                    var fileExtension = obj.file.name.substring(obj.file.name.lastIndexOf('.') + 1);
                    // 这里可以设置允许上传的文件后缀
                    var allowExtensions = ['zip'];
                
                    if($.inArray(fileExtension, allowExtensions) == -1){
                        layer.msg('文件格式不正确，请上传jpg、png、jpeg、gif、bmp格式的图片！', function(){
                        // 清除对象里的文件，可以避免重复上传相同文件
                        obj.upload.filename = '';
                        });
                        // 返回false可以阻止文件上传
                        return false;
                    }
                    
                    // 继续执行上传操作
                    return true;
                }
                ,done: function(res){
                    debugger
                    //上传完毕回调
                    if(res.code == 0){
                        //假设返回的res.data是图片链接
                        $('#tx-upload-img').append('<img src="'+ res.data +'" alt="上传成功" class="layui-upload-img">');
                    }
                }
                ,error: function(){
                    //请求出错的处理
                    console.log('上传失败');
                }
            });
        });
    </script>
</body>

</html>